<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="addGift()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div class="table-container" style="margin-top: 10px">
        <el-table
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
          :data="list"
        >
          <el-table-column
            label="创建时间"
            prop="createTime"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="名称"
            min-width="100"
            prop="name"
            align="center"
          ></el-table-column>

          <el-table-column
            label="合作方"
            min-width="100"
            align="center"
            prop="partner"
          ></el-table-column>

          <el-table-column
            label="面值金额"
            min-width="100"
            align="center"
            prop="money"
          ></el-table-column>

          <el-table-column label="有效期" min-width="200" align="center">
            <template slot-scope="scope">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div>
                  {{ scope.row.InDate }}
                  <br />
                  {{ scope.row.InTime }}
                </div>
                <span>-</span>
                <div>
                  {{ scope.row.endDate }}
                  <br />
                  {{ scope.row.endtime }}
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="是否永久"
            prop="permanentValidity"
            align="center"
          ></el-table-column>

          <el-table-column
            label="是否包邮"
            prop="postage"
            align="center"
          ></el-table-column>

          <el-table-column
            label="状态"
            prop="status"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.status | statusFilter }}
            </template>
          </el-table-column>

          <el-table-column
            label="编辑时间"
            prop="editTime"
            align="center"
          ></el-table-column>

          <el-table-column
            label="编辑人"
            prop="editName"
            align="center"
          ></el-table-column>

          <el-table-column
            label="支付账户"
            prop="payAccount"
            align="center"
          ></el-table-column>

          <el-table-column
            label="一级用户"
            min-width="100"
            prop="oneLevel"
            align="center"
          ></el-table-column>

          <el-table-column
            label="二级用户"
            min-width="100"
            align="center"
            prop="twoLevel"
          ></el-table-column>

          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleDetails(scope.$index, scope.row)"
                >详情
              </el-button>
              <el-button
                type="text"
                @click="handleProdute(scope.$index, scope.row)"
                >查看绑定商品
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>
<script>
import { giftPage } from "@/api/marke/index";

export default {
  data() {
    return {
      list: [],
      listQuery: {
        size: 10,
        current: 1,
      },
      total: 0,
      Status: {
        id: null,
        onOff: true,
      },
    };
  },
  created() {
    this.getList();
  },
  filters: {
    statusFilter(value) {
      if (value === 1) {
        return "未开始";
      } else if (value === 2) {
        return "发放中";
      } else if (value === 3) {
        return "已过期";
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      giftPage(this.listQuery).then((res) => {
        let list = res.data.data.records;
        list.forEach((item) => {
          if (item.beginTime) {
            let dateKey = item.beginTime;
            let tempArray = dateKey.split(" ");
            item.InDate = tempArray[0];
            item.InTime = tempArray[1];
          }
          if (item.endTime) {
            let dateKey = item.endTime;
            let tempArray = dateKey.split(" ");
            item.endDate = tempArray[0];
            item.endtime = tempArray[1];
          }
        });
        this.list = list;
        this.total = res.data.data.total;
      });
    },
    handleDetails(index, row) {
      this.$router.push({
        path: "/marke/gift/details",
        query: { giftId: row.id },
      });
    },
    handleProdute(index, row) {
      this.$router.push({
        path: "/marke/gift/produte",
        query: { giftId: row.id },
      });
    },
    addGift() {
      this.$router.push({ path: "/marke/gift/giftAdd" });
    },
  },
};
</script>
